<template>
  <view class="container">
    <table style="width:90%;height: 60vh;margin-top: 30rpx;">
      <thead>
      <tr style="background-color: #ccc">
        <th>序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>缺勤次数</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in studentList" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.studentId }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.absence }}</td>
      </tr>
      </tbody>
    </table>


  </view>
</template>
<script>
import teacher from "../../api/teacher";

export default {
  data() {
    return {
      studentList: [{
        id: 0,
        studentId: 0,
        name: '',
        sex: '',
        absence: 0
      }],
      courseId: 0
    }
  },
  async onLoad(option) {
    this.courseId = Number(option.id)
    console.log('qwioeqweqwe',this.courseId)
    await this.courseStudentList()
  },
  methods: {
    //获取某个课程的学生名单
    async courseStudentList() {
      try {
        const res = await teacher.courseStudentList(this.courseId)
        this.studentList = res.data
        console.log('77777', res.data)

      } catch (e) {
        return Promise.reject(e)
      }
    },
  },

}
</script>
<style>

.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
}


table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 14px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  word-wrap: break-word;
  white-space: pre-line;
}

</style>